<template>
  <div class="contain pagehome">
    <!-- <h3 class="title">燃气安全监测</h3> -->
    <div class="monitor_fw">
      <h4>
        监测范围
        <i class="iconfont iconditu" @click="mapDistribution"></i>
      </h4>
      <ul class="clearfix">
        <li>
          <span>
            <b>{{
                monitoringScope.outDoorGasline
                  ? monitoringScope.outDoorGasline.toFixed(2)
                  : 0
              }}</b
            >公里
          </span>
          <p>户外燃气管网</p>
        </li>
        <li>
          <span>
            <b>{{ monitoringScope.combustibleGasMonitor }}</b> 套
          </span>
          <p>可燃气体监测仪</p>
        </li>
        <li>
          <span>
            <b>{{ monitoringScope.inDoorGas }}</b> 户
          </span>
          <p>户内天然气</p>
        </li>
        <li>
          <span>
            <b>{{ monitoringScope.inDoorAlarm }}</b
            >套
          </span>
          <p>户内报警器</p>
        </li>
      </ul>
    </div>
    <div class="warning_statistics">
      <h4>预警统计</h4>
      <div class="warning_hig" v-if="monitoringScope.totalAlramList.length > 0">
        <div
          class="statistical_box"
          v-for="alarmlist in monitoringScope.totalAlramList"
          :key="alarmlist.alarmType"
        >
          <h6>{{ alarmlist.alarmType }} <p @click="lookWarningList(alarmlist.alarmType, 4)" 
          v-if="alarmlist.alarmType!='整体情况'">历史报警({{ alarmlist.alarmType=='户外燃气泄漏预警'?
          monitoringScope.totalAlramHisList.gasHisNum:monitoringScope.totalAlramHisList.biogasHisNum}})</p></h6>  
          <ul>
            <li @click="lookWarningList(alarmlist.alarmType, 0)">
              <b>{{ alarmlist.totalAlarm }}</b>
              <p>总数</p>
            </li>
            <li @click="lookWarningList(alarmlist.alarmType, 1)">
              <el-badge :max="99" :value="alarmlist.unDealReadCount==0?'':alarmlist.unDealReadCount" ><b>{{ alarmlist.unDeal }}</b></el-badge>
              <p>未处置</p>
            </li>
            <li @click="lookWarningList(alarmlist.alarmType, 2)">
              <el-badge :max="99"   :value="alarmlist.dealingReadCount==0?'':alarmlist.dealingReadCount"><b>{{ alarmlist.dealing }}</b></el-badge> 
              <p>处置中</p>
            </li>
            <li @click="lookWarningList(alarmlist.alarmType, 3)">
              <b>{{ alarmlist.dealed }}</b>
              <p>已处置</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      footCur: 1,
      monitoringScope: {
        totalAlramHisList:{},
        totalAlramList:[]
      }
    };
  },
  methods: {
    lookWarningList(type,dealStatus) {
      this.$router.push({ name: "warnlist", query: { userId: this.$store.state.userInfo.id,type:type,status:dealStatus } });
    },
    mapDistribution() {
      this.$router.push({ name: "mapdistribution" });
    },
    getFixedSized(value){
      var length = 4
      if((value+"").length>4){
        length = (value+"").length;
      }
      var size = (1.0/length)*80
      return size
    },
    getHomeData(){
         var param = {
        userName:this.$store.state.userInfo.loginName
      };
    this.$api.reqApi.alarm(param).then(res => {
      if (res.code === "200") {
        this.monitoringScope = res.data;
      }
    });
  
    }
  },
  created() {
	  console.log(this.$route.query)
	  // debugger
    if (this.$route.query.userInfo) {
      let obj = {}
      obj = JSON.parse(this.$route.query.userInfo);
      this.$store.commit('setUserInfo', {
          loginName:obj.loginName,
          id:obj.userid,
          telephone:obj.cellphone,
          name:obj.username,
          orgName:obj.orgName,
          roleName:obj.name
      })
    }
  },
  mounted() {
    window["dsBridge"].register("whetherHtml", function(ret) {
      console.log("=======ret:" + ret);
      return false;
    });
    this.getHomeData()
  }
};
</script>

<style lang="stylus" scoped>
::v-deep{
.el-badge__content.is-fixed {
  right:0px;
} 
.el-badge__content{
    background-color: #ff3f47;
}

}
.contain {
  background: url('../assets/images/bg.png') #f5f6fa no-repeat;
  background-size: contain;
  height: 100%;
}

.title {
  padding: 0;
  height: auto;
  background-image: linear-gradient(45deg, transparent, transparent);
}

.monitor_fw {
  margin: 0.28rem;

  ul li {
    width: calc(100% / 2 - 0.15rem);
    background: rgba(92, 165, 255, 0.49);
    border-radius: 0.08rem;
    height: 1.6rem;
    font-size: 0.24rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    padding-left: 0.33rem;
    box-sizing: border-box;
    float: left;
    margin-bottom: 0.3rem;

    b {
      font-size: 0.35rem;
      padding-right: 0.1rem;
    }

    p {
      font-size: 0.28rem;
      padding-top: 0.1rem;
    }

    &:nth-child(1) {
      background: url('../assets/images/scope_icon1.png') rgba(92, 165, 255, 0.49) no-repeat 90% center;
      background-size: 20%;
    }

    &:nth-child(2) {
      background: url('../assets/images/scope_icon2.png') rgba(92, 165, 255, 0.49) no-repeat 90% center;
      background-size: 20%;
      margin-left: 0.3rem;
    }

    &:nth-child(3) {
      background: url('../assets/images/scope_icon3.png') rgba(92, 165, 255, 0.49) no-repeat 90% center;
      background-size: 20%;
    }

    &:nth-child(4) {
      background: url('../assets/images/scope_icon4.png') rgba(92, 165, 255, 0.49) no-repeat 90% center;
      background-size: 20%;
      margin-left: 0.3rem;
    }
  }
}

.monitor_fw h4 {
  font-size: 0.36rem;
  color: #fff;
  margin-bottom: 0.24rem;

  i {
    float: right;
    font-size: 0.52rem;
    margin-top: -0.08rem;
  }
}

.warning_statistics {
  margin: 0 0.3rem;

  h4 {
    color: #222;
    font-size: 0.32rem;
  }

  .statistical_box {
    background: #fff;
    height: 2.02rem;
    box-shadow: 0 7px 10px 0px rgba(157, 168, 177, 0.3);
    margin-bottom: 0.3rem;
    border-radius: 7px;
  }

  h6 {
    font-size: 0.3rem;
    color: #2a2c32;
    padding: 0.3rem 0.3rem 0.25rem 0.3rem;
    display: flex;
    justify-content: space-between;
    p{
     color: #428EE3;
    font-size: 0.2rem;
    }
  }

  ul {
    display: flex;
    flex-direction: row;

    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      &:nth-child(1) {
        color: #2a2c32;
      }

      &:nth-child(2) {
        color: #e8555b;
      }

      &:nth-child(3) {
        color: #faa762;
      }

      &:nth-child(4) {
        color: #82c26c;
      }
    }

    b {
      font-size: 0.42rem;
    }

    p {
      font-size: 0.28rem;
      color: #666b77;
    }
  }
}

.warning_hig {
  height: calc(100vh - 7rem);
  overflow-y: scroll;
  margin-top: 0.3rem;
}
</style>
